<template>
  <div class="vxeTableCom">
    <a-spin :spinning="loading">
      <div style="max-height:calc(100vh - 220px);overflow:auto;height:calc(100vh - 220px)">
        <vxe-table
          border="inner"
          :show-footer="false"
          resizable
          highlight-hover-row
          :data="tableData"
          align="center"
        >
          <!-- @cell-click="cellClickEvent" -->
          <!-- <vxe-column type="seq" width="60"></vxe-column> -->
          <vxe-column
            field="ebsName"
            style="color:#1890ff"
            title="EBS名称"
            v-if="tableTitle=='wbs管理'"
          >
            <template #default="{ row }" style="cursor: pointer;color:#1890ff">
              <span style="color:#1890ff;cursor: pointer">{{row.ebsName}}</span>
            </template>
          </vxe-column>
          <vxe-column field="ebsTypeName" title="构件类型" min-width="200" v-if="tableTitle=='wbs管理'"></vxe-column>
          <vxe-column field="ebsId" title="EBS编码" v-if="tableTitle=='wbs管理'"></vxe-column>

          <vxe-column field="wbsName" title="工程清单" v-if="tableTitle=='已完成标记'">
            <template #default="{ row }" style="cursor: pointer;color:#1890ff">
              <span style="color:#1890ff;cursor: pointer">{{row.wbsName}}</span>
            </template>
          </vxe-column>
          <vxe-column field="totalCount" title="工序数量" v-if="tableTitle=='已完成标记'"></vxe-column>
          <vxe-column field="markFinishCount" title="已完工标记数量" v-if="tableTitle=='已完成标记'"></vxe-column>
          <vxe-column field="rate" title="标记占比" v-if="tableTitle=='已完成标记'"></vxe-column>

          <vxe-column field="sort" width="100" v-if="tableTitle=='清单目录配置'" title="排序"></vxe-column>
          <!-- <vxe-column field="totalCount" title="排序" v-if="tableTitle=='清单目录配置'"></vxe-column> -->
          <vxe-column field="dataName" title="工程清单名称" v-if="tableTitle=='清单目录配置'"></vxe-column>
          <vxe-column field="parentWorkName" title="上级WBS" v-if="tableTitle=='清单目录配置'"></vxe-column>
          <vxe-column title="操作" width="100" v-if="detailName">
            <template #default="{ row }" style="cursor: pointer">
              <span
                @click="onDetail(row)"
                style="color:#1890ff;cursor: pointer"
                v-if="detailName!='删除'"
              >{{detailName}}</span>
              <a-popconfirm
                v-else
                title="是否确认删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="onDetail(row)"
                @cancel="cancel"
              >
                <a href="#">{{detailName}}</a>
              </a-popconfirm>
            </template>
          </vxe-column>

          <template #empty>
            <div class="flexCenter2" style="height:372px">
              <div style="color:gray;">
                <svg-icon icon-class="kongshuju" style="font-size:32px;color:#999"></svg-icon>
                <!-- <img src="/vxe-table/static/other/img2.gif"> -->
                <p>暂无数据</p>
              </div>
            </div>
          </template>
        </vxe-table>
      </div>
    </a-spin>
  </div>
</template>

<script>
export default {
  name: 'vxeTableCom',
  props: ['tableData', 'loading', 'detailName', 'tableTitle'],
  data() {
    return {}
  },
  created() {},
  methods: {
    onDetail(text) {
      this.$emit('tableDetail', text)
    },
    cancel(e) {
      // console.log(e);
      // this.$message.suc('取消删除');
    }
    // 在name列点击后弹框选择
    // cellClickEvent({ row, column }) {
    //   console.log(column);

    //   if (column.property == 'wbsName') {
    //     console.log(row);
    //     this.$emit('tableDetail', text)
    //   }
    // }
  }
}
</script>

<style lang="less" scoped>
.vxeTableCom {
  position: relative;
  height: 100%;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

::v-deep .vxe-table--render-default.border--inner .vxe-body--column {
  background-image: linear-gradient(#f0f0f0, #f0f0f0) !important;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 100% 100%;
}
::v-deep .vxe-table--render-default.border--inner .vxe-header--column {
  background-image: linear-gradient(#f0f0f0, #f0f0f0) !important;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 100% 100%;
}
</style>
